<template>
  <div class="date__select">
    <el-date-picker
      v-model="select_year"
      type="year"
      value-format="yyyy"
      placeholder="选择年"
      :picker-options="yearPickerOptions"
      :clearable="!chooseOnly"
      :editable="false"
      @change="handleYearChange"
    />
    <el-select
      v-model="select_startMonth"
      placeholder="选择月"
      class="month__select"
      :clearable="!chooseOnly"
      @change="handleStartMonthChange"
    >
      <el-option
        v-for="month in 12"
        :key="month"
        :label="month + '月'"
        :value="month"
        :disabled="!!select_endMonth && month > select_endMonth"
      />
    </el-select>
    <el-select v-model="select_startDay" placeholder="选择日" :clearable="!chooseOnly" @change="handleStartDayChange">
      <el-option
        v-for="day in startDayLen"
        :key="day"
        :label="day + '日'"
        :value="day"
        :disabled="startDayDisabled(day)"
      />
    </el-select>
    <span class="join">{{ joinStr }}</span>
    <el-select
      v-model="select_endMonth"
      placeholder="选择月"
      class="month__select"
      :clearable="!chooseOnly"
      @change="handleEndMonthChange"
    >
      <el-option
        v-for="month in 12"
        :key="month"
        :label="month + '月'"
        :value="month"
        :disabled="!!select_startMonth && month < select_startMonth"
      />
    </el-select>
    <el-select v-model="select_endDay" placeholder="选择日" :clearable="!chooseOnly" @change="handleEndDayChange">
      <el-option v-for="day in endDayLen" :key="day" :label="day + '日'" :value="day" :disabled="endDayDisabled(day)" />
    </el-select>
  </div>
</template>

<script>
import dayjs from "dayjs"
export default {
  props: {
    joinStr: {
      type: String,
      default: "——"
    },
    year: {
      type: String,
      default: ""
    },
    startMonth: {
      type: [String, Number],
      default: ""
    },
    startDay: {
      type: [String, Number],
      default: ""
    },
    endMonth: {
      type: [String, Number],
      default: ""
    },
    endDay: {
      type: [String, Number],
      default: ""
    },
    pickerOptions: {
      type: Object
    },
    chooseOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      select_year: this.year,
      select_startMonth: this.startMonth ? Number(this.startMonth) : "",
      select_startDay: this.startDay ? Number(this.startDay) : "",
      select_endMonth: this.endMonth ? Number(this.endMonth) : "",
      select_endDay: this.endDay ? Number(this.endDay) : "",
      yearPickerOptions: this.pickerOptions
    }
  },
  created() {
    if (this.pickerOptions) {
      this.yearPickerOptions = this.pickerOptions
    } else {
      this.yearPickerOptions = {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  computed: {
    startDayLen() {
      const str = `${this.select_year}-${this.select_startMonth}`
      let len = dayjs(str).daysInMonth()
      if (isNaN(len)) {
        len = 31
      }
      return len
    },
    endDayLen() {
      const str = `${this.select_year}-${this.select_endMonth}`
      let len = dayjs(str).daysInMonth()
      if (isNaN(len)) {
        len = 31
      }
      return len
    }
  },
  watch: {
    pickerOptions(val) {
      if (val) {
        this.yearPickerOptions = val
      }
    },
    year(val) {
      this.select_year = val
    },
    startMonth(val) {
      this.select_startMonth = val ? Number(val) : ""
    },
    startDay(val) {
      this.select_startDay = val ? Number(val) : ""
    },
    endMonth(val) {
      this.select_endMonth = val ? Number(val) : ""
    },
    endDay(val) {
      this.select_endDay = val ? Number(val) : ""
    }
  },
  methods: {
    handleYearChange(val) {
      this.$emit("update:year", val ? val : "")
      this.$emit("change")
    },
    handleStartMonthChange(val) {
      this.select_startDay = ""
      this.$emit("update:startMonth", this.format(val))
      this.$emit("update:startDay", "")
      this.$emit("change")
    },
    handleStartDayChange(val) {
      this.$emit("update:startDay", this.format(val))
      this.$emit("change")
    },
    handleEndMonthChange(val) {
      this.select_endDay = ""
      this.$emit("update:endMonth", this.format(val))
      this.$emit("update:endDay", "")
      this.$emit("change")
    },
    handleEndDayChange(val) {
      this.$emit("update:endDay", this.format(val))
      this.$emit("change")
    },
    endDayDisabled(day) {
      if (!this.select_startDay) {
        return false
      }
      if (this.select_startMonth === this.select_endMonth) {
        return this.select_startDay > day
      } else if (this.select_startMonth > this.select_endMonth) {
        return true
      }
      return false
    },
    startDayDisabled(day) {
      if (!this.select_endDay) {
        return false
      }
      if (this.select_startMonth === this.select_endMonth) {
        return day > this.select_endDay
      } else if (this.select_startMonth > this.select_endMonth) {
        return true
      }
      return false
    },
    // 1 => 01 11-> 11
    format(num) {
      if (!num) {
        return ""
      }
      return num.toString().padStart(2, "0")
    },
    reset() {
      this.select_year = ""
      this.select_startMonth = ""
      this.select_startDay = ""
      this.select_endMonth = ""
      this.select_endDay = ""
    }
  }
}
</script>

<style lang="less" scoped>
.date__select {
  .join {
    margin: 0 8px;
  }
  .el-select {
    width: 100px;
  }
  .el-input {
    width: 100px;
  }
  .el-date-editor {
    margin-right: 8px;
  }
  .month__select {
    margin-right: 8px;
  }
}
</style>
